  let banner = document.querySelector(".banner");
  let ul = document.querySelector(" .banner .carouselul");
  let ulis = document.querySelectorAll(".banner .carouselul li");
  let olis = document.querySelectorAll(".banner .carouselol li");
  let prev = document.querySelector(".banner .left");
  let next = document.querySelector(".banner .right");


  let flag = true;
  // 克隆元素
  function setUI() {
   
    let firstLi = ulis[0].cloneNode(true);
    let lastLi = ulis[ulis.length - 1].cloneNode(true);
    
    ul.appendChild(firstLi);
    ul.insertBefore(lastLi, ulis[0]);
    
    ulis = document.querySelectorAll(".banner .carouselul li");
      ul.style.width = ulis.length * ulis[0].clientWidth + "px";
      // console.log(ulis[0]);
      // console.log(ulis[0].clientWidth);
    
    ul.style.left = -ulis[0].clientWidth + "px";
  }
  setUI();

  // 自动轮播
  let n = 1;
  let timer;
  timer = setInterval(() => {
    if (!flag) return;
    flag = false;
    n++;
    // 调用运动函数显示li的图片
    run();
  }, 2000);

  // 鼠标移入移出暂停和启动自动轮播
  banner.onmouseenter = () => {
    // 鼠标移入
    clearInterval(timer);
  };
  banner.onmouseleave = () => {
    // 鼠标移出
    if (!flag) return;
    flag = false;
    n++;
    run();
    // 启动自动轮播，开定时器
    timer = setInterval(() => {
      if (!flag) return;
      flag = false;
      n++;
      run();
    }, 2000);
  };

  // 点击上一张和下一张显示图片轮播
  prev.onclick = () => {
    // 点击上一张
    if (!flag) return;
    flag = false;
    n--;
    run();
  };
  next.onclick = () => {
    // 点击下一张
    if (!flag) return;
    flag = false;
    n++;
    run();
  };

  // 点击小圆点显示轮播
  for (let i = 0; i < olis.length; i++) {
    olis[i].onclick = () => {
      if (!flag) return;
      flag = false;
      n = i + 1;
      run();
    };
  }

  // 封装运动函数调用方法
  function run() {
    move(
      ul,
      {
        left: -n * ulis[0].clientWidth,
      },
      () => {
        if (n === 4) {
          n = 1;
        }
        if (n === 0) {
          n = 3;
        }
        ul.style.left = -n * ulis[0].clientWidth + "px";
        for (let i = 0; i < olis.length; i++) {
          olis[i].className = "";
        }
        olis[n - 1].className = "active";
        flag = true;
      }
    );
}
  

// 从数据库中读取数据添加到content的内容区进行渲染
// ajax({
//   url: 'js/insertindex.php',
//   dataType: 'json',
//   success(res) {
//     // console.log(res);
//     let contul = $('.content .contentli');
//     // let i = 0;
//     // $.each($('.content .contentli li'), function (index,value) {
//     //   // console.log(index, value);
//     //   contul.append($('<li><img src="" alt=""><a href="" class="shopname"></a><span class="price"></span></li>'));
//     //   $(value).find('img').attr('src', `images/${res[i].id}.png`);
//     //   $(value).find('a').text(res[i].name);
//     //   $(value).find('span').text('￥'+res[i].price);
//     //   i++;
//     // })

//     for (let i = 0; i < res.length; i++){
//       if (i % 4 == 0) {
//         let h = 460 * (parseInt(i / 4)+1);
//         $('.content').css('height', h);
//         // console.log(h);
//       }
//       contul.append($('<li><img src="" alt=""><a href="" class="shopname"></a><span class="price"></span></li>'));
//       let li = $('.content .contentli li:last-child');
//       li.find('img').attr('src', `images/${res[i].id}.png`);
//       li.find('a').text(res[i].name);
//       li.find('span').text('￥' + res[i].price);  
//       li.find('img').click(function () {
//         delCookie('id');
//         setCookie('id', res[i].id);
//         location.href='html/details.html';
//       })
//       li.find('a').click(function () {
//         delCookie('id');
//         setCookie('id', res[i].id);
//         location.href='html/details.html';
//         return false;
//       })
//     }    
//   }
// })


// 登录成功之后显示用户名

let cook = getCookie('username');
if (cook) {
  $('.header .headerbox ul li:first-child a').text(cook);
  // console.log("****");
  $('.header .headerbox ul li:nth-child(2) a').text("退出");;
  $('.header .headerbox ul li:nth-child(2)').on('click','a',function(e){
    e.preventDefault();
    if($('.header .headerbox ul li:nth-child(2) a').text()=='退出'){
      delCookie('username');
      $('.header .headerbox ul li:nth-child(2) a').text("免费注册");
      $('.header .headerbox ul li:first-child a').text('亲，请登录');
    }
    else{
      location.href='html/register.html';
    }
  })
}
// setCookie('username',getCookie('username'));
// alert("***")


// 分页显示
// 加载层
let index = layer.load(0,{
  shade:['.5','#ccc']
})
// ajax请求数据
$.ajax({
  url: 'js/insertindex.php',
  dataType: 'json',
  success(res){
    // console.log(res);
    // 结构获取数据
    let data = res;
    layui.use(['laypage', 'layer'], function(){
      var laypage = layui.laypage
      //调用分页
      laypage.render({
        elem: 'page'
        ,count: data.length
        ,limit:4
        ,layout: ['count', 'prev', 'page', 'next','limit', 'refresh', 'skip']      
        ,limits:[4,8,12]
        ,prev:'后退一页'
        ,next:'前进一页'
        ,first:'首页'
        ,last:'尾页'
        ,jump: function(obj){
          //模拟渲染
          let i=0;
          let res = (function(){
            var arr = []           
            ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
            layui.each(thisData, function(index, item){
              if (i % 4 == 0) {
                let h = 460 * (parseInt(i / 4)+1);
                $('.content').css('height', h);
                // console.log(h);
              }
              i++;
              // console.log(item);
              arr.push(`<li data-id='${item.id}'><img src="images/${item.id}.png" alt=""><a href="" class="shopname">${item.name}</a><span class="price">￥${item.price}</span></li>`);
              
            });
            return arr.join('');
          })();
          $('.contentli').html(res);
          // 渲染结束关闭加载层
          layer.close(index);  
        }
      }); 

    });
  }
})

// console.log($('.contentli li'));

// window.onload=function(){
//   console.log($('.content .contentli li'));
// }
       // 点击图片与商品名称跳转的点击事件
       $('.contentli').on('click','li img',function(){
        console.log("****");
        delCookie('id');
        // console.log($(this).parents("li"));
        setCookie('id', $(this).parents("li")[0].dataset.id);
        location.href='html/details.html';
      })
      $('.contentli').on('click','li a',function(){
        delCookie('id');
        setCookie('id', $(this).parents("li")[0].dataset.id);
        location.href='html/details.html';
        return false;
      })

// li.find('img').click(function () {
//   delCookie('id');
//   setCookie('id', res[i].id);
//   location.href='html/details.html';
// })
// li.find('a').click(function () {
//   delCookie('id');
//   setCookie('id', res[i].id);
//   location.href='html/details.html';
//   return false;
// })